<template>
	<view class="mycard-page">
		<view class="mycard-jbxx">
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">账号</label>
					<input class="jbxx-input" v-model="account" type="text" disabled="true" placeholder="" placeholder-style="color:#cecdd2" />
				</view>
			</view>
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">真实姓名</label>
					<input class="jbxx-input" v-model="realname" type="text" placeholder="暂未填写（必填）" placeholder-style="color:#cecdd2" />
				</view>
			</view>
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">性别</label>
					<radio-group @change="chosesex">
						<label style="display: inline-block;margin-left: 30rpx;"  >
							<view style="display: inline-block;">
								<radio value="男士" :checked="sexvalue=='男士'" style="transform: scale(0.8);" />
							</view>
							<view style="display: inline-block;font-size: 14px;">男</view>
						</label>
						<label style="display: inline-block;margin-left: 30rpx;">
							<view style="display: inline-block;" >
								<radio value="女士" :checked="sexvalue=='女士'" style="transform: scale(0.8);" />
							</view>
							<view style="display: inline-block;font-size: 14px;">女</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">公司名称</label>
					<input class="jbxx-input" v-model="comname" type="text" placeholder="暂未填写（必填）" placeholder-style="color:#cecdd2"
					 :disabled="company!=''" />
				</view>
			</view>
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">会员类型</label>
					<input class="jbxx-input" v-model="huiyuantype" type="text" disabled="true" placeholder="暂未填写（必填）"
					 placeholder-style="color:#cecdd2" />
				</view>
			</view>
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">手机号码</label>
					<input class="jbxx-input" v-model="tel" type="text" placeholder="暂未填写（必填）" placeholder-style="color:#cecdd2" />
				</view>
			</view>
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">邮箱</label>
					<input class="jbxx-input" v-model="mail" type="text" placeholder="暂未填写（必填）" placeholder-style="color:#cecdd2" />
				</view>
			</view>
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">通讯地址</label>
					<input class="jbxx-input" v-model="address" type="text" placeholder="暂未填写（必填）" placeholder-style="color:#cecdd2" />
				</view>
			</view>
			<view class="jbxx-cells">
				<view class="bitian">*</view>
				<view class="jbxx-cell">
					<label class="jbxx-name">注册时间</label>
					<input class="jbxx-input" type="text" v-model="creattime" placeholder="暂未填写（必填）" disabled="true" placeholder-style="color:#cecdd2" />
				</view>
			</view>
		</view>
		<view style="width: 100%; background-color: #fff; padding: 50rpx 0;">
			<button class="wszl-btn" @click="tijiaoxinxi">确认提交</button>
		</view>
	</view>
</template>

<script>
	// import Vue from 'vue'

	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				numberValue: 0,
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				current: 0,
				tel: '',
				sexvalue: '',
				account: '',
				realname: '',
				comname: '',
				huiyuantype: '',
				creattime: '',
				address: '',
				mail: '',
				company: ''
			}
		},
		onLoad() {
			this.checkLogin(1);
		},
		onShow() {
			this.checkLogin(1);
			if (this.currUser.islogin)
				this.binddata();
		},
		methods: {
			chosesex(type) {
				this.sexvalue = type.detail.value;
			},
			tijiaoxinxi() {
				if (this.realname == "") {
					uni.showToast({
						title: "请输入真实姓名",
						icon: "none"
					});
					return false;
				} else if (this.comname == "") {
					uni.showToast({
						title: "请输入公司名称",
						icon: "none"
					});
					return false;
				} else if (this.sexvalue == "") {
					uni.showToast({
						title: "请选择性别",
						icon: "none"
					});
					return false;
				} else if (this.tel == "") {
					uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					});
					return false;
				} else if (this.address == "") {
					uni.showToast({
						title: "请输入通讯地址",
						icon: "none"
					});
					return false;
				} else {
					this.submit_xinxi();
				}
			},
			submit_xinxi() {
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 5139;
				data.realname = this.realname;
				data.sexvalue = this.sexvalue;
				data.comname = this.comname;
				data.tel = this.tel;
				data.address = this.address;
				data.mail = this.mail;
				uni.request({
					url: this.baseConfig.serverURL + 'User/gerenzhongxin/EditXinxiHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								return;
							} else {
								//成功
								uni.showToast({
									title: res.data.msg,
									icon: "none",
									success: function() {
										setTimeout(function() {
											uni.switchTab({
												url: '/pages/user/user',
											});
										}, 2000)
									}

								});
							}
						} else {
							uni.showToast({
								title: '提交失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '提交失败！',
							icon: "none"
						});
					}
				})
			},
			binddata() {
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 5139;
				uni.request({
					url: this.baseConfig.serverURL + 'User/gerenzhongxin/BindXinxiHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								return;
							} else {
								//获取成功，绑定
								let list = res.data.other2;
								console.log(list);
								if (list == undefined || list == null) {
									uni.showToast({
										title: "数据加载失败",
										icon: "none"
									});
									return;
								}
								this.account = list.account;
								this.realname = list.realname;
								this.sexvalue = list.sex;
								this.comname = list.comname;
								this.huiyuantype = list.huiyuantype;
								this.tel = list.tel;
								this.creattime = list.createtime;
								this.address = list.address;
								this.mail = list.mail;
								this.company = list.comname;
							}
						} else {
							uni.showToast({
								title: '数据加载失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '数据加载失败！',
							icon: "none"
						});
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
		height: 100%;
	}

	.mycard-page {
		background-color: #f6f6f6;
		height: 100%;
	}

	.mycard-tab {
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin: 20rpx 0;

		.mycard-tab_list {
			width: 50%;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.on {
			padding: 20rpx 0;
			border-bottom: 4rpx solid #2d67e0;
			color: #2d67e0;
		}
	}

	.mycard-jbxx {
		background-color: #fff;
		margin-top: 15rpx;

		.jbxx-cells {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 30rpx;
		}

		.bitian {
			font-size: 28rpx;
			color: #f90a00;
			margin-right: 10rpx;
		}

		.jbxx-cell {
			flex: 1 1 0%;
			padding: 30rpx 30rpx 30rpx 0;
			border-bottom: 1px solid #dcdcdc;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.jbxx-name {
				font-size: 32rpx;
				color: #252525;
			}

			.jbxx-input {
				font-size: 30rpx;
				color: #000;
				text-align: right;
			}
		}
	}

	.wszl-btn {
		width: 90%;
		margin-left: 5%;
		background-color: #2f69e0;
		color: #FFFFFF;
		border-radius: 50rpx;
	}

	.cgsl {
		display: flex;
		flex-direction: row;
		align-items: center;

		.cgsl-btn {
			background-color: #fff;
			border: 0;
			width: 80rpx;
			font-size: 30rpx;
		}

		.cgsl-btn:after {
			border: 0;
		}

		.cgsl-num {
			width: 80rpx;
			text-align: center;
			height: 80rpx;
			color: #000;
		}
	}

	.cgxx-descr {
		padding: 20rpx 0;
		width: 100%;

		.jbxx-name {
			font-size: 15px;
			color: #252525;
		}

		.description {
			padding: 20rpx;
			border: 1px solid #e4e4e4;
			margin-top: 20rpx;
			font-size: 28rpx;
			width: 95%;
			box-sizing: border-box;
		}
	}
</style>
